<script setup lang="ts">
import axios from 'axios'
import {ref} from 'vue'
import { ChannelItem, ChannelResData } from '../types/data';


// 渲染频道流程
// 1. 获取数据 将数据存放到响应式变量中
// 2. 页面上遍历列表 进行渲染


// 数据获取-----------------------------
const channels = ref<ChannelItem[]>([])

const getChannels = async() => {
  // 发送请求时添加的泛型, 可以限定 res.data. 之后的数据结构
  const res = await axios<ChannelResData>({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  // 默认情况下, res.data 就是响应数据的容器
  // 下面的目标是通过ts 泛型的形式, 实现类型声明获得自动补全功能
  // 实际的操作
  console.log(res.data.data.channels);
  // 赋值给响应式变量, 用来遍历渲染
  channels.value = res.data.data.channels
}

getChannels()

// 高亮处理-----------------------------
defineProps<{
  channelId: number
}>()

const emit = defineEmits<{
  (e: 'changeChannel', id: number): void
}>()

</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        @click="emit('changeChannel', item.id)"
        class="item"
        :class="{ active: item.id === channelId }"
        href="javascript:;"
        v-for="(item) in channels"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
